<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>小耀page</title>
		<link rel="stylesheet" href="layui/css/layui.css">
		<link rel="stylesheet" href="css/login.css">
	</head>
	<body>
		<form class="layui-form layui-anim layui-anim-downbit" action="" method="post" id="securityform">
			<div class="container">


				<div class="layui-form-mid layui-word-aux">

					<img id="logoid" src="imgs/天津航空.png" height="35">
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">用户名</label>
					<div class="layui-input-block">

						<input type="text" name="username" required lay-verify="required" placeholder="请输入用户名"
							autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">密 &nbsp;&nbsp;码</label>
					<div class="layui-input-inline">
						<input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
							autocomplete="off" class="layui-input">
					</div>

				</div>



				<div class="layui-form-item">
					<div class="layui-input-block" style="margin-bottom: 50px;">
						<button class="layui-btn" lay-submit lay-filter="formDemo"
							style="background-color: crimson;">登录</button>
						
					</div>
					<a href="/oauth2/authorization/github" style="margin-left: 180px;"><img src="imgs/github-mark.png" alt="Github" title="Github" width="25px"> GitHub</a>
				</div>


			</div>

		</form>

	</body>


	<script src="layui/layui.js"></script>
	<script>
		layui.use(function() {
			var form = layui.form,
				layer = layui.layer,
				$ = layui.$;
			//指定开关事件
			form.on('switch(switchTest)', function(data) {
				console.log(data)
				console.log(this.checked)
				layer.msg('自动登录功能: ' + (this.checked ? '开启' : '关闭'), {
					offset: '6px'
				});

			});

			form.on("submit(formDemo)", function(data) {
				console.log(data) //前端表格发送的数据

				$.post("http://localhost:8080/doLogin", $('#securityform').serialize(), function(rs) {
					//根据后端返回的数据来判断是否登录成功  后端服务器部署在tomcat上面 提高springboot+mybatisplus
					console.log(rs);
					if (rs.code == 200) {
						sessionStorage.setItem("userInfo", JSON.stringify(rs.data))
						sessionStorage.setItem("token", rs.token)
						layer.msg("登陆成功....")

						//登陆成功后直接访问index页面
						$(location).attr("href", "../backend/index.html");
						return;
					}
					layer.alert("输入有误，请重新输入")
					//可以添加一个输入有误后，清除表单input上次输入的内容
					$(".layui-form-item input").val("")
				});

				return false;

			});
		});
	</script>



</html>
